<template>
  <div class="main">
    <p class="main_text">商户店铺管理</p>
    <!-- 搜索 -->
    <div class="g-search" ref="searchBox">
      <!-- 顶部按钮区域 -->
      <div class="search_box1">
        <!-- 时间选择区域 -->
        <div class="demo-date-picker">
          <!-- 店铺创建时间 -->
          <div class="block" style="min-width: 600px">
            <span class="demonstration">店铺创建时间：</span>
            <el-date-picker
              v-model="searchValue.startAt"
              type="date"
              placeholder="开始时间"
              @change="startTime"
              :clearable="false"
              :default-time="defaultTime(0, 0, 0)" />
            <span class="demonstration" style="display: inline-block; font-size: 12px; color: #898989; margin: 20px"
              >至</span
            >
            <el-date-picker
              v-model="searchValue.endAt"
              type="date"
              placeholder="结束时间"
              @change="endTime"
              :clearable="false"
              :default-time="defaultTime1(23, 59, 59)" />
          </div>
        </div>
        <!-- 信息区域 -->
        <div class="all_select">
          <!-- 店铺等级 -->
          <div class="input_valye">
            <span class="demonstration">店铺等级：</span>
            <el-select v-model="searchValue.rank" class="m-2" placeholder="请选择等级" @change="search">
              <el-option v-for="item in rate_options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <!-- 店铺类型 -->
          <div class="input_valye">
            <span class="demonstration">店铺类型：</span>
            <el-select v-model="searchValue.type" class="m-2" placeholder="请选择类型" @change="search">
              <el-option v-for="item in shopType_options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>

          <span class="demonstration">状态：</span
          ><el-select
            v-model="searchValue.status"
            class="m-2"
            placeholder="请选择状态"
            style="width: 175px"
            @change="search">
            <el-option v-for="item in status_options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <!-- 店铺名称 -->
          <div class="input_valye">
            <span class="demonstration">店铺名称：</span>
            <input
              type="text"
              class="input"
              placeholder="请输入店铺名称"
              v-model="searchValue.shopName"
              @keyup.enter="search" />
          </div>
        </div>
      </div>
      <!-- 底部按钮区域 -->
      <div class="bottom_btn">
        <el-button class="solid" @click="search">查询</el-button>
        <el-button class="hollow" @click="reset">重置</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="cyr-flex">
      <!-- 表格按钮区域 -->
      <div class="mb20">
        <el-button class="hollow" @click="massTexting">群发信息</el-button>
        <el-popconfirm
          confirm-button-text="是"
          cancel-button-text="否"
          :icon="InfoFilled"
          @confirm="delAll"
          icon-color="#626AEF"
          title="是否确认删除?">
          <template #reference>
            <el-button type="danger" plain>批量删除</el-button>
          </template>
        </el-popconfirm>
      </div>
      <!-- 表格区域 -->
      <div class="cyr-flex-box">
        <el-table
          :data="tableData"
          id="out-table"
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }"
          :show-overflow-tooltip="true"
          v-adaptive
          border>
          <el-table-column type="selection" width="40" />
          <el-table-column prop="id" label="店铺ID" width="120" align="center" />
          <el-table-column prop="headImg" label="店铺LOGO" width="100" align="center">
            <template #default="item">
              <img v-if="item.row.headImg" :src="item.row.headImg" style="width: 50px; height: 50px" />
            </template>
          </el-table-column>
          <el-table-column prop="shopName" label="店铺名" width="100" align="center">
            <template #default="scope">
              <el-text tag="span" style="cursor: pointer" @click="bindEditGoods(scope.row)">{{
                scope.row.shopName
              }}</el-text>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="店铺类型" width="120" align="center">
            <template #default="scope">
              <el-text v-if="scope.row.type == 0" class="mx-1" type="info">
                <span style="font-size: 30px">·</span>&nbsp;普通商户</el-text
              >
              <el-text v-else-if="scope.row.type == 1" class="mx-1" type="info">
                <span style="font-size: 30px">·</span>&nbsp;拆解厂商户</el-text
              ></template
            >
          </el-table-column>
          <el-table-column prop="depositIsPayed" label="保证金状态" width="100" align="center">
            <template #default="scope">
              <el-text v-if="scope.row.depositIsPayed == 1" class="mx-1" type="success">
                <span style="font-size: 30px">·</span>&nbsp;已缴</el-text
              ><el-text v-else-if="scope.row.depositIsPayed == 2" class="mx-1" type="warning">
                <span style="font-size: 30px">·</span>&nbsp;未缴</el-text
              >
              <el-text v-else class="mx-1" type="info">
                <span style="font-size: 30px">·</span>&nbsp;无需缴纳</el-text
              ></template
            >
          </el-table-column>
          <el-table-column prop="rank" label="店铺等级" width="80" align="center">
            <template #default="scope">
              <el-text v-if="scope.row.rank == 0" class="mx-1" type="success">
                <span style="font-size: 30px">·</span>&nbsp;青铜</el-text
              ><el-text v-else-if="scope.row.rank == 1" class="mx-1" type="warning">
                <span style="font-size: 30px">·</span>&nbsp;白银</el-text
              >
              <el-text v-else-if="scope.row.rank == 2" class="mx-1" type="info">
                <span style="font-size: 30px">·</span>&nbsp;黄金</el-text
              ><el-text v-else class="mx-1" type="info">
                <span style="font-size: 30px">·</span>&nbsp;钻石</el-text
              ></template
            >
          </el-table-column>
          <el-table-column prop="creditScore" label="信用分" width="100" align="center" />
          <el-table-column prop="licenseDeadline" label="营业执照期限" width="120" align="center" />
          <el-table-column prop="director" label="主要负责人" width="120" align="center" />
          <el-table-column prop="directorPhone" label="主要负责人电话" width="140" align="center" />
          <el-table-column prop="settleAt" label="创建时间" width="180" align="center" />
          <el-table-column prop="updatedAt" label="更新时间" width="180" align="center" />
          <el-table-column label="店铺状态" prop="status" width="100" align="center">
            <template #default="scope">
              <el-text v-if="scope.row.status == 0" class="mx-1" type="primary">
                <span style="font-size: 30px">·</span>&nbsp;待审核</el-text
              >
              <el-text v-else-if="scope.row.status == 1" class="mx-1" type="primary">
                <span style="font-size: 30px">·</span>&nbsp;待缴费</el-text
              >
              <el-text v-else-if="scope.row.status == 2" class="mx-1" type="success">
                <span style="font-size: 30px">·</span>&nbsp;待激活</el-text
              >
              <el-text v-else-if="scope.row.status == 3" class="mx-1" type="info">
                <span style="font-size: 30px">·</span>&nbsp;已过期</el-text
              >
              <el-text v-else-if="scope.row.status == 4" class="mx-1" type="warning">
                <span style="font-size: 30px">·</span>&nbsp;激活成功</el-text
              >
              <el-text v-else-if="scope.row.status == 5" class="mx-1" type="warning">
                <span style="font-size: 30px">·</span>&nbsp;审核失败</el-text
              >
              <el-text v-else-if="scope.row.status == 6" class="mx-1" type="warning">
                <span style="font-size: 30px">·</span>&nbsp;注销</el-text
              >
              <el-text v-else-if="scope.row.status == 7" class="mx-1" type="warning">
                <span style="font-size: 30px">·</span>&nbsp;黑名单</el-text
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" class="operation" :show-overflow-tooltip="false">
            <template #default="item">
              <div class="table_btn">
                <el-button size="small" class="none" @click="bindEditGoods(item.row)">查看</el-button>
                <el-button
                  size="small"
                  class="none"
                  @click="activate(item.row)"
                  v-if="item.row.status === 1 || item.row.status === 5"
                  >查看审核</el-button
                >
                <el-button size="small" class="none" @click="check(item.row)" v-if="item.row.status === 0"
                  >审核</el-button
                >
                <el-popconfirm
                  confirm-button-text="是"
                  cancel-button-text="否"
                  :icon="InfoFilled"
                  @confirm="bindDelGoods(item.row.id)"
                  icon-color="#626AEF"
                  title="是否确认删除?">
                  <template #reference>
                    <el-button size="small" class="none_del">删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <smartPager
          v-model:current-page="searchValue.page"
          v-model:page-size="searchValue.rows"
          :total="total"
          @change="pageChange" />
      </div>
    </div>
    <!-- 抽屉 -->
    <el-drawer v-model="drawer">
      <!-- 店铺头像，名字 -->
      <div class="shop_head">
        <div class="shop">
          <img :src="GoodsformDate.headImg" class="shop_logo" />
          <div class="name">
            {{ GoodsformDate.shopName }}
            <p class="shop_id">店铺账号:{{ GoodsformDate.directorPhone }}</p>
          </div>
        </div>
      </div>
      <!-- 导航 -->
      <div class="nav1">
        <li class="nav_li current" @click="navLi(0)" id="nav_li1">店铺平台信息</li>
        <li class="nav_li" @click="navLi(1)" id="nav_li2">主体资质信息</li>
      </div>
      <!-- 店铺平台信息 -->
      <div class="platform" v-show="platform">
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/Edit-name.png" alt="" />
          <div class="title">店铺名称</div>
          <div class="mes">{{ GoodsformDate.shopName }}</div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/Frame43.png" alt="" />
          <div class="title">店铺账号</div>
          <div class="mes">{{ GoodsformDate.directorPhone }}</div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/Frame46.png" alt="" />
          <div class="title">店铺类型</div>
          <div class="mes">{{ shopType }}</div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/Frame43.png" alt="" />
          <div class="title">保证金状态</div>
          <div class="mes">{{ depositIsPayed }}</div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/Crown-two.png" alt="" />
          <div class="title">店铺等级</div>
          <div class="mes">{{ GoodsformDate.rank }}</div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/CreditCard.png" alt="" />
          <div class="title">信用分</div>
          <div class="mes">{{ GoodsformDate.creditScore }}</div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/Frame71.png" alt="" />
          <div class="title">店铺状态</div>
          <div class="mes">
            <el-select v-model="GoodsformDate.status" class="m-2" placeholder="请选择商品状态" style="width: 200px">
              <el-option v-for="item in edit_status" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="btn_center">
          <el-button @click="addGoodsCancel" class="hollow">取消</el-button>
          <el-button class="solid" @click="addGoodsBtn()">确定</el-button>
        </div>
      </div>
      <!-- 主体资质信息 -->
      <div class="principal" v-show="principal">
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/Edit-name.png" alt="" />
          <div class="title">店铺名称</div>
          <div class="mes">{{ GoodsformDate.shopName }}</div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/MapPinLine.png" alt="" />
          <div class="title">店铺地址</div>
          <div class="mes">{{ GoodsformDate.shopAddress }}</div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/Topbuzz.png" alt="" />
          <div class="title">店铺LOGO</div>
          <img :src="GoodsformDate.headImg" alt="" style="width: 100px; height: 100px" />
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/Edit-name.png" alt="" />
          <div class="title">负责人姓名</div>
          <div class="mes">{{ GoodsformDate.director }}</div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/Phone-telephone.png" alt="" />
          <div class="title">负责人手机号</div>
          <div class="mes">{{ GoodsformDate.directorPhone }}</div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/Frame43.png" alt="" />
          <div class="title">对公账户</div>
          <div class="mes">
            {{ GoodsformDate.companyBankCard.accountNumber }}
          </div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/Bank.png" alt="" />
          <div class="title">开户行</div>
          <div class="mes">{{ GoodsformDate.companyBankCard.bankName }}</div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/MapPinLine.png" alt="" />
          <div class="title">公司地址</div>
          <div class="mes">{{ GoodsformDate.companyAddress }}</div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/Frame43.png" alt="" />
          <div class="title">公司信用代码</div>
          <div class="mes">{{ GoodsformDate.creditCode }}</div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/image.png" alt="" />
          <div class="title">公司营业执照</div>
          <el-image
            style="width: 100px; height: 100px"
            :src="GoodsformDate.licenses[0]"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="GoodsformDate.licenses"
            :initial-index="4"
            fit="cover" />
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/Edit-name.png" alt="" />
          <div class="title">法人姓名</div>
          <div class="mes">{{ GoodsformDate.corporationName }}</div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/Frame46.png" alt="" />
          <div class="title">证件类型</div>
          <div class="mes">身份证</div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/Frame43.png" alt="" />
          <div class="title">证件号码</div>
          <div class="mes">{{ GoodsformDate.corporationId }}</div>
        </div>
        <div class="area">
          <img class="img_b" src="@/assets/images/shop/goods/image.png" alt="" />
          <div class="title">法人证件照</div>
          <el-image
            style="width: 100px; height: 100px; margin-right: 10px"
            :src="GoodsformDate.idCards[0]"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="GoodsformDate.idCards"
            :initial-index="4"
            fit="cover" />
          <el-image
            style="width: 100px; height: 100px; margin-right: 10px"
            :src="GoodsformDate.idCards[1]"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="GoodsformDate.idCards"
            :initial-index="4"
            fit="cover" />
        </div>
      </div>
    </el-drawer>
    <!-- 商家审核查看 -->
    <div class="audit" v-if="auditShow">
      <div class="title1">
        <div class="title_mes">
          <el-icon> <Tickets /> </el-icon>查看审核信息
        </div>
        <span class="close" @click="maskBtn1">✖</span>
      </div>
      <div class="content1" style="margin-top: 0">
        <div class="shop_title">商家审核信息</div>
        <el-table
          :data="tableData1"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column prop="shopName" label="店铺名称" align="center" />
          <el-table-column prop="status" label="审核结果" align="center">
            <template #default="scope">
              <el-text v-if="scope.row.status == 0" class="mx-1" type="primary">
                <span style="font-size: 30px">·</span>&nbsp;待审核</el-text
              >
              <el-text v-else-if="scope.row.status == 1" class="mx-1" type="primary">
                <span style="font-size: 30px">·</span>&nbsp;待缴费</el-text
              >
              <el-text v-else-if="scope.row.status == 2" class="mx-1" type="success">
                <span style="font-size: 30px">·</span>&nbsp;待激活</el-text
              >
              <el-text v-else-if="scope.row.status == 3" class="mx-1" type="info">
                <span style="font-size: 30px">·</span>&nbsp;已过期</el-text
              >
              <el-text v-else-if="scope.row.status == 4" class="mx-1" type="warning">
                <span style="font-size: 30px">·</span>&nbsp;激活成功</el-text
              >
              <el-text v-else-if="scope.row.status == 5" class="mx-1" type="warning">
                <span style="font-size: 30px">·</span>&nbsp;审核失败</el-text
              >
              <el-text v-else-if="scope.row.status == 6" class="mx-1" type="warning">
                <span style="font-size: 30px">·</span>&nbsp;注销</el-text
              >
              <el-text v-else-if="scope.row.status == 7" class="mx-1" type="warning">
                <span style="font-size: 30px">·</span>&nbsp;黑名单</el-text
              >
            </template>
          </el-table-column>
          <el-table-column prop="type" label="审核时间" align="center" />
          <el-table-column prop="depositIsPayed" label="未通过原因" align="center" />
          <el-table-column prop="rank" label="是否需要缴纳保证金" align="center" />
          <el-table-column prop="creditScore" label="说明" align="center" />
        </el-table>
        <div class="btn_center">
          <el-button class="hollow" @click="auditSure">取消</el-button>
          <el-button class="solid" @click="auditSure">确定</el-button>
        </div>
      </div>
    </div>
    <!-- 商家审核表格 -->
    <div class="shop_table" v-if="shopTableShow">
      <div class="title1">
        <div class="title_mes">
          <el-icon> <Edit /> </el-icon>入驻审核
        </div>
        <span class="close" @click="maskBtn1">✖</span>
      </div>
      <div class="content1">
        <div class="title">基本信息</div>
        <el-descriptions border :column="3">
          <el-descriptions-item
            label="店铺名称"
            label-align="center"
            label-class-name="my-label"
            class-name="my-content"
            :span="2">
            {{ shuoCheck.shopName }}
          </el-descriptions-item>
          <el-descriptions-item label="店铺LOGO" label-align="right" align="center">
            <el-image
              :preview-src-list="[shuoCheck.headImg]"
              :src="shuoCheck.headImg"
              style="width: 50px; height: 50px" />
          </el-descriptions-item>
          <el-descriptions-item label="经营地址" label-align="right" :span="3">{{
            shuoCheck.shopAddress
          }}</el-descriptions-item>
          <el-descriptions-item label="商户简介" label-align="right" :span="3">{{
            shuoCheck.briefIntroduction
          }}</el-descriptions-item>
          <el-descriptions-item label="公司名称" label-align="right" :span="3">{{
            shuoCheck.companyName
          }}</el-descriptions-item>
          <el-descriptions-item label="公司地址" label-align="right" :span="3">{{
            shuoCheck.companyAddress
          }}</el-descriptions-item>
          <el-descriptions-item label="主要负责人" label-align="right" :span="2">{{
            shuoCheck.director
          }}</el-descriptions-item>
          <el-descriptions-item label="联系电话" label-align="right">{{
            shuoCheck.directorPhone
          }}</el-descriptions-item>
          <el-descriptions-item label="对公账户" label-align="right" :span="2">
            {{ shuoCheck.companyBankCard.accountNumber }}
          </el-descriptions-item>
          <el-descriptions-item label="开户行" label-align="right" :span="1">
            {{ shuoCheck.companyBankCard.bankName }}
          </el-descriptions-item>

          <el-descriptions-item label="法人身份证" label-align="right" :span="2">
            <el-image
              :preview-src-list="[shuoCheck.idCards[0]]"
              :src="shuoCheck.idCards[0]"
              style="width: 50px; height: 50px" />
            <el-image
              :preview-src-list="shuoCheck.idCards[1]"
              :src="shuoCheck.idCards[1]"
              style="width: 50px; height: 50px" />
          </el-descriptions-item>
          <el-descriptions-item label="法人姓名" label-align="right" :span="1">
            {{ shuoCheck.corporationName }}
          </el-descriptions-item>
          <el-descriptions-item label="营业执照" label-align="right" :span="1">
            <el-image
              :preview-src-list="[shuoCheck.licenses]"
              :src="shuoCheck.licenses"
              style="width: 50px; height: 50px" />
          </el-descriptions-item>
          <el-descriptions-item label="社会统一性用代码" label-align="right" :span="1">
            {{ shuoCheck.creditCode }}
          </el-descriptions-item>
          <el-descriptions-item label="营业执照期限" label-align="right" :span="1">
            {{ shuoCheck.licenseDeadline }}
          </el-descriptions-item>
          <el-descriptions-item label="资质证书" label-align="right" :span="3">
            <el-image
              v-for="(index, item) in shuoCheck.certifications"
              :preview-src-list="shuoCheck.certifications"
              :src="shuoCheck.certifications[item]"
              style="width: 50px; height: 50px"
              :key="index" />
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="check">
        <span class="check_text">审核是否通过</span>
        <div class="btn_center">
          <el-button class="hollow" @click="shopTableCancle">不通过</el-button>
          <el-button class="solid" @click="shopTableSure">通过</el-button>
        </div>
      </div>
    </div>
    <!-- 审核通过 -->
    <div class="pass" v-if="passShow">
      <div class="title1">
        <div class="title_mes">
          <el-icon size="20" color="#fff"> <Edit /> </el-icon>&nbsp;是否缴纳保障金
        </div>
        <div class="close" @click="maskBtn1">✖</div>
      </div>
      <div class="center">
        <div class="text1">
          <el-icon> <CircleCheck /> </el-icon>审核通过
        </div>
        <div class="text2">是否需要缴纳保证金</div>
      </div>
      <div class="btn_center">
        <el-button class="btn hollow" @click="passCancle" style="width: 100px">否</el-button>
        <el-button class="btn solid" @click="passSure" style="width: 100px">是</el-button>
      </div>
    </div>
    <!-- 商家未通过 -->
    <div class="UnPass" v-if="UnPassShow">
      <div class="title1">
        <div class="title_mes">
          <el-icon> <Edit /> </el-icon>审核未通过
        </div>
        <span class="close" @click="maskBtn1">✖</span>
      </div>
      <div class="content1">
        <div class="cause">
          <span class="cause_title">原因：</span>
          <el-input
            type="textarea"
            :rows="6"
            maxlength="100"
            show-word-limit
            placeholder="输入审核未通过原因，内容不可超过100字"
            v-model="unPassCause"></el-input>
        </div>
        <div class="btn_center">
          <el-button class="hollow" @click="UnPassCancle">取消</el-button>
          <el-button class="solid" @click="UnPassSure">确定</el-button>
        </div>
      </div>
    </div>
    <!-- 群发信息 -->
    <div class="messages" v-if="messagesShow">
      <div class="title1">
        <div class="title_mes">
          <el-icon size="20" color="#fff"> <Edit /> </el-icon>&nbsp;群发消息
        </div>
        <span class="close" @click="maskBtn1">✖</span>
      </div>
      <div class="content1" style="margin-top: 40px">
        <el-form ref="ruleFormRef" :model="sendMes" label-width="90px" label-position="right" :rules="rules">
          <el-form-item label="推送类型:" prop="type">
            <el-select v-model="sendMes.type" class="m-2" placeholder="请选择推送类型" @change="typeChange">
              <el-option v-for="item in type_options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <span id="input_hint"></span>
          </el-form-item>
          <el-form-item label="消息模板:" prop="templateId">
            <el-select v-model="sendMes.templateId" class="m-2" placeholder="请选择消息模板" @change="typeChange1">
              <el-option v-for="item in template_options" :key="item.title" :label="item.title" :value="item.id">
              </el-option>
            </el-select>
            <span id="input_hint"></span>
          </el-form-item>
          <el-form-item label="消息标题:" prop="title">
            <el-input
              v-model="sendMes.title"
              class="form_input"
              maxlength="50"
              type="textarea"
              show-word-limit></el-input>
            <span id="input_hint"></span>
          </el-form-item>
          <el-form-item label="短信内容:" prop="content">
            <el-input
              v-model="sendMes.content"
              cols="30"
              rows="4"
              class="form_input"
              maxlength="300"
              type="textarea"
              show-word-limit></el-input>
            <span id="input_hint"></span>
          </el-form-item>
        </el-form>
        <div style="display: flex; align-items: center; font-size: 14px; color: #3d3d3d">
          <el-icon color="#116CF8" size="18"> <Warning /> </el-icon
          >&nbsp;发送时系统会自动在结尾追加平台名称，请勿重复添加
        </div>
        <div class="btn_center">
          <el-button class="hollow" @click="maskBtn1">取消</el-button>
          <el-button class="solid" @click="plateformSure(ruleFormRef)">确定</el-button>
        </div>
      </div>
    </div>
  </div>
  <!-- 遮罩层 -->
  <div id="mask1" v-if="mask" @click="maskBtn1"></div>
</template>
<script setup lang="ts">
import {ref, onMounted, reactive, onBeforeUnmount} from 'vue';
import {Tickets, CircleCheck, InfoFilled, Warning, Edit} from '@element-plus/icons-vue';
import {
  RequestStoreAmend,
  RequestShopDEl,
  RequestShopDElAll,
  RequestShopInquire,
  RequestStoreShopAudit,
  RequesttemplateIds,
  RequestPlatformToShopMes,
} from '@/api/path/index.js';
import {ElMessage} from 'element-plus';
import moment from 'moment';
import type {FormInstance} from 'element-plus';
// 引入导出Excel表格依赖
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
/**
 * 导出信息
 */
const exportExcel = () => {
  /* 从表生成工作簿对象 */
  var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'));
  /* 获取二进制字符串作为输出 */
  var wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array',
  });
  try {
    FileSaver.saveAs(
      //Blob 对象表示一个不可变、原始数据的类文件对象。
      //Blob 表示的不一定是JavaScript原生格式的数据。
      //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
      //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
      new Blob([wbout], {type: 'application/octet-stream'}),
      //设置导出文件名称
      'idea.xlsx',
    );
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbout);
  }
  return wbout;
};
const ruleFormRef = ref<FormInstance>();
const defaultTime = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
const defaultTime1 = (H: any, M: any, S: any) => {
  console.log('mmmmmmmmmmmmmmmmmmmmmmmm', H, M, S);
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
const adminId = localStorage.getItem('roleInfo');
const userId = JSON.parse(adminId ? adminId : '').id;
// 挂载
onMounted(() => {
  requestShopInquire();
  handleResize();
  window.addEventListener('resize', handleResize);
});
const searchBox = ref();
const tablelistHeight = ref();
const handleResize = () => {
  const searchBoxHeight = searchBox.value.clientHeight;
  tablelistHeight.value = 110 + searchBoxHeight + 'px';
  console.log('Search Box height11111111111111111111111111111:', searchBoxHeight);
};

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});
const drawer = ref(false);
const platform = ref(true); //控制平台信息的显示
const principal = ref(false); //控制平台信息的显示

// 表单规则
const rules = reactive({
  type: [{required: true, message: '请选择推送类型', trigger: 'change'}],
  templateId: [{required: true, message: '请选择消息模板', trigger: 'change'}],
  title: [{required: true, message: '请输入消息标题', trigger: 'blur'}],
  content: [{required: true, message: '请输入发送内容', trigger: 'blur'}],
});
// 推送消息数据
const sendMes = ref({
  templateId: '',
  type: '',
  content: '',
  title: '',
});
const tableData = ref<any>([]); // 表格列表
const total = ref(0); //表格总数
// 获取表格列表
const requestShopInquire = async () => {
  const a = await RequestShopInquire(searchValue.value);
  console.log(a);
  console.log('获取成功', a.resultObj.shopList);
  for (let i = 0; i < a.resultObj.shopList.length; i++) {
    tableData.value[i] = a.resultObj.shopList[i].shop;
    total.value = a.resultObj.totalCount;
    tableData.value[i].settleAt = tableData.value[i].settleAt.replace(/T/g, ' ').slice(0, 16);
    tableData.value[i].updatedAt = tableData.value[i].settleAt.replace(/T/g, ' ').slice(0, 16);
    tableData.value[i].companyBankCard = JSON.parse(a.resultObj.shopList[i].shop.companyBankCard.value);
    const photo = a.resultObj.shopList[i].shopPics;
    tableData.value[i].idCards = [];
    tableData.value[i].certifications = [];
    for (let j = 0; j < photo?.length; j++) {
      console.log('zzzzzzzzzzzz', photo[j]);
      if (photo[j].type === 0) {
        tableData.value[i].headImg = photo[j].picUrl;
      } else if (photo[j].type === 1) {
        tableData.value[i].licenses = photo[j].picUrl;
      } else if (photo[j].type === 2) {
        tableData.value[i].idCards.push(photo[j].picUrl);
      } else {
        tableData.value[i].certifications.push(photo[j].picUrl);
      }
    }
  }
  console.log('测试', tableData.value);
  // total.value = tableData.value.length
};
// 状态选择器
const status_options = [
  {
    value: 0,
    label: '待审核',
  },
  {
    value: 1,
    label: '待缴费',
  },
  {
    value: 2,
    label: '待激活',
  },
  {
    value: 3,
    label: '已过期',
  },
  {
    value: 4,
    label: '激活成功',
  },
  {
    value: 5,
    label: '审核失败',
  },
  {
    value: 6,
    label: '注销',
  },
  {
    value: 7,
    label: '黑名单',
  },
];
// 等级选择器
const rate_options = [
  {
    value: 0,
    label: '青铜',
  },
  {
    value: 1,
    label: '白银',
  },
  {
    value: 2,
    label: '黄金',
  },
  {
    value: 3,
    label: '钻石',
  },
];
// 类型选择器
const shopType_options = [
  {
    value: 0,
    label: '普通商户',
  },
  {
    value: 1,
    label: '拆解厂商户',
  },
];
const edit_status = [
  {
    value: 0,
    label: '待审核',
  },
  {
    value: 1,
    label: '待缴费',
  },
  {
    value: 2,
    label: '待激活',
  },
  {
    value: 3,
    label: '激活超时',
  },
  {
    value: 4,
    label: '正常',
  },
  {
    value: 5,
    label: '审核失败',
  },
  {
    value: 6,
    label: '注销',
  },
  {
    value: 7,
    label: '黑名单',
  },
];
// 搜索参数
const searchValue = ref({
  shopName: '',
  status: '',
  startAt: '',
  endAt: '',
  rank: '',
  type: '',
  page: 1,
  rows: 10,
});
// 开始时间
const startTime = () => {
  searchValue.value.startAt.setHours(0);
  searchValue.value.startAt.setMinutes(0);
  searchValue.value.startAt.setSeconds(0);
  searchValue.value.startAt = moment(searchValue.value.startAt).format('yyyy-MM-DD HH:mm:ss');
  console.log(searchValue.value.startAt);
  search();
};
// 结束时间
const endTime = () => {
  searchValue.value.endAt.setHours(23);
  searchValue.value.endAt.setMinutes(59);
  searchValue.value.endAt.setSeconds(59);
  searchValue.value.endAt = moment(searchValue.value.endAt).format('yyyy-MM-DD HH:mm:ss');
  search();
};
// 点击搜索
const search = async () => {
  if (moment(searchValue.value.startAt).diff(moment().format('YYYY-MM-DD HH:mm:ss')) >= 0) {
    ElMessage.error('开始时间不能晚于当前日期');
    searchValue.value.startAt = '';
  } else {
    // 判断是否两个时间都填写了
    if (searchValue.value.startAt !== '' && searchValue.value.endAt !== '') {
      // 判断开始时间不能晚于结束时间
      if (moment(searchValue.value.startAt).diff(moment(searchValue.value.endAt)) <= 0) {
        tableData.value = [];
        searchValue.value.page = 1;
        requestShopInquire();
      } else {
        ElMessage.error('结束时间不能早于开始时间');
        searchValue.value.endAt = '';
      }
    } else {
      // 表示两个时间填写了任意一个
      tableData.value = [];
      searchValue.value.page = 1;
      requestShopInquire();
    }
  }
};
/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    shopName: '',
    status: '',
    startAt: '',
    endAt: '',
    rank: '',
    type: '',
    page: 1,
    rows: 10,
  };
  requestShopInquire();
};
// 选中的表格数组
const delIdsArray = ref<any>([]);
const delIds = ref<any>([]);
// 表格复选框选中事件
const handleSelectionChange = (selection: any) => {
  for (let x = 0; x < tableData.value.length; x++) {
    tableData.value[x].selection = false;
  }
  for (let i = 0; i < selection.length; i++) {
    selection[i].selection = true;
  }
  delIdsArray.value = selection;
  delIds.value = [];
  for (let i = 0; i < selection.length; i++) {
    delIds.value.push(selection[i].id);
  }
  console.log('数组', delIds.value);
};

const messagesShow = ref(false); //控制群发显示
// 点击群发消息
const massTexting = () => {
  if (delIds.value.length == 0) {
    ElMessage.error('请选择接收消息的商户');
  } else {
    messagesShow.value = true;
    mask.value = true;
  }
};
/**
 * 推送类型
 */
const type_options = [
  {
    value: 0,
    label: '支付通知',
  },
  {
    value: 1,
    label: '物流通知',
  },
  {
    value: 2,
    label: '平台公告',
  },
  {
    value: 3,
    label: '优惠促销',
  },
];
/**
 * 根据推送类型获取模板
 */
const template_options = ref<any>([]);
const typeChange = async () => {
  const a = await RequesttemplateIds(sendMes.value.type);
  template_options.value = a.resultObj;
};
const typeChange1 = async (value: number) => {
  template_options.value.forEach((item: any) => {
    if (item.id == value) {
      sendMes.value.content = item.content;
    }
  });
};
/**
 * 群发消息确认
 */
const plateformSure = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async (valid: any, fields: any) => {
    if (valid) {
      const a = await RequestPlatformToShopMes({
        ids: delIds.value,
        templateId: sendMes.value.templateId,
        content: sendMes.value.content,
        type: sendMes.value.type,
        title: sendMes.value.title,
      });
      if (a.msg == '操作成功！') {
        messagesShow.value = false;
        mask.value = false;
        sendMes.value = {
          templateId: '',
          type: '',
          content: '',
          title: '',
        };
        ElMessage.success('操作成功！');
      } else {
        ElMessage.error('操作失败');
      }
    }
  });
};
// 添加,编辑商品列表
const GoodsformDate = ref({
  id: 0, //店铺ID
  headImg: '', //店铺LOGO
  shopName: '', //店铺名
  type: 0, //店铺类型
  depositIsPayed: 0, //保证金状态
  rank: '', //店铺等级
  creditScore: 0, //信用分
  licenseDeadline: '', //营业执照期限
  director: '', //主要负责人
  directorPhone: '', //主要负责人电话
  settleAt: '', //创建时间
  updatedAt: '', //更新时间
  status: 0, //状态
  licenses: [], //营业执照
  corporationName: '', //法人姓名
  corporationId: '', //法人身份证
  idCards: [], //法人身份证图片
  certifications: [], //资质证书
  shopAddress: '',
  companyName: '', //公司名字
  creditCode: '', //社会信用代码
  companyAddress: '', //公司地址
  companyBankCard: {
    bankName: '',
    accountNumber: '',
  },
});
const shopType = ref('');
const depositIsPayed = ref('');
// 点击查看
const bindEditGoods = (item: any) => {
  platform.value = true;
  principal.value = false;
  const x = document.getElementById('nav_li1');
  const y = document.getElementById('nav_li2');
  x ? x.classList.add('current') : '';
  y ? y.classList.remove('current') : '';
  drawer.value = true;
  console.log('vds', item);
  GoodsformDate.value = {
    id: item.id, //店铺ID
    headImg: item.headImg, //店铺LOGO
    shopName: item.shopName, //店铺名
    type: item.type, //店铺类型
    depositIsPayed: item.depositIsPayed, //保证金状态
    rank: item.rank, //店铺等级
    creditScore: item.creditScore, //信用分
    licenseDeadline: item.licenseDeadline, //营业执照期限
    director: item.director, //主要负责人
    directorPhone: item.directorPhone, //主要负责人电话
    settleAt: item.settleAt, //创建时间
    updatedAt: item.updatedAt, //更新时间
    status: item.status, //状态
    corporationName: item.corporationName, //法人姓名
    corporationId: item.corporationId, //法人身份证
    idCards: item.idCards, //法人身份证图片
    certifications: item.certifications, //资质证书
    shopAddress: item.shopAddress,
    licenses: [],
    companyName: item.companyName, //公司名字
    creditCode: item.creditCode, //社会信用代码
    companyAddress: item.companyAddress, //公司地址
    companyBankCard: {
      bankName: item.companyBankCard.bankName,
      accountNumber: item.companyBankCard.accountNumber,
    },
  };
  GoodsformDate.value.licenses[0] = item.licenses;
  console.log('店铺店铺店铺店铺店铺店铺店铺店铺', GoodsformDate.value);

  // 店铺类型
  if (GoodsformDate.value.type === 0) {
    shopType.value = '普通商户';
  } else if (GoodsformDate.value.type === 1) {
    shopType.value = '拆解厂';
  } else if (GoodsformDate.value.type === 2) {
    shopType.value = '自营';
  }
  // 保证金状态
  if (GoodsformDate.value.depositIsPayed === 0) {
    depositIsPayed.value = '未缴纳';
  } else {
    depositIsPayed.value = '缴纳';
  }
};

// 点击删除
const bindDelGoods = (id: number) => {
  console.log(id);
  new Promise((resolve, reject) => {
    RequestShopDEl(id)
      .then((res: any) => {
        resolve(res);
        requestShopInquire();
      })
      .catch((err: any) => {
        reject(err);
      });
  });
};
// 批量删除
const delAll = () => {
  if (delIds.value.length === 0) {
    ElMessage.error('请选择删除的商户');
  } else {
    for (let i = 0; i < delIdsArray.value.length; i++) {
      delIds.value.push(delIdsArray.value[i].id);
    }
    new Promise((resolve, reject) => {
      RequestShopDElAll(delIds.value)
        .then((res: any) => {
          resolve(res);
          requestShopInquire();
        })
        .catch((err: any) => {
          reject(err);
        });
    });
  }
};
// 编辑商品取消按钮
const addGoodsCancel = () => {
  drawer.value = false;
  platform.value = false;
};
const empId = JSON.parse(localStorage.getItem('roleInfo')!).id;
//添加,编辑商品确认按钮
const addGoodsBtn = () => {
  ElMessage.success('成功');
  new Promise((resolve, reject) => {
    RequestStoreAmend(GoodsformDate.value.id, GoodsformDate.value.status, empId)
      .then(() => {
        resolve('成功');
        requestShopInquire();
      })
      .catch(() => {
        reject('失败');
      });
  });
  drawer.value = false;
  platform.value = false;
};
// 点击切换导航栏
const navLi = (value: number) => {
  if (value === 0) {
    platform.value = true;
    principal.value = false;
    const x = document.getElementById('nav_li1');
    const y = document.getElementById('nav_li2');
    x ? x.classList.add('current') : '';
    y ? y.classList.remove('current') : '';
  } else {
    platform.value = false;
    principal.value = true;
    const x = document.getElementById('nav_li2');
    const y = document.getElementById('nav_li1');
    x ? x.classList.add('current') : '';
    y ? y.classList.remove('current') : '';
  }
};
const auditShow = ref(false); //控制商家审核显示
const passShow = ref(false); //控制审核通过显示
const UnPassShow = ref(false); //控制审核未通过显示
const shopTableShow = ref(false); //控制审核表格显示
const mask = ref(false); //控制遮罩层显示

//商家审核
const shuoCheck = ref({
  id: '',
  shopName: '',
  headImg: '',
  shopAddress: '',
  briefIntroduction: '',
  companyName: '',
  companyAddress: '',
  director: '',
  directorPhone: '',
  companyBankCard: {
    accountNumber: '',
    bankName: '',
  },
  idCards: [],
  corporationName: '',
  licenses: '',
  creditCode: '',
  licenseDeadline: '',
  certifications: [],
});
/**
 * 点击待审核
 */
const check = (item: any) => {
  shopTableShow.value = true;
  mask.value = true;
  console.log(item);
  shuoCheck.value = item;
};
const auditResult = ref(0);
const depositRequired = ref(false);
/**
 * 审核确认事件
 */
const shopTableSure = () => {
  shopTableShow.value = false;
  passShow.value = true;
  auditResult.value = 0;
};
/**
 * 审核取消事件
 */
const shopTableCancle = () => {
  shopTableShow.value = false;
  UnPassShow.value = true;
};
/**
 * 缴纳保证金确认
 */

let timer = ref(null); //设置记录时间，用于防抖
const passSure = () => {
  if (timer != null) {
    clearTimeout(timer);
  }
  timer = setTimeout(async () => {
    depositRequired.value = true;
    const a = {
      adminId: userId,
      shopId: shuoCheck.value.id,
      auditResult: auditResult.value,
      rejectReason: unPassCause.value,
      depositRequired: depositRequired.value,
    };
    console.log(a);
    new Promise((resolve, reject) => {
      RequestStoreShopAudit(a)
        .then((res: any) => {
          resolve(res);
          passShow.value = false;
          mask.value = false;
          ElMessage.success('审核成功');
          requestShopInquire();
        })
        .catch((err: any) => {
          reject(err);
          ElMessage.error('审核失败');
        });
    });
  }, 500);
};
/**
 * 缴纳保证金否
 */
const passCancle = () => {
  if (timer != null) {
    clearTimeout(timer);
  }
  timer = setTimeout(async () => {
    depositRequired.value = false;
    const a = {
      adminId: userId,
      shopId: shuoCheck.value.id,
      auditResult: auditResult.value,
      rejectReason: unPassCause.value,
      depositRequired: depositRequired.value,
    };
    console.log(a);
    new Promise((resolve, reject) => {
      RequestStoreShopAudit(a)
        .then((res: any) => {
          resolve(res);
          passShow.value = false;
          mask.value = false;
          ElMessage.success('审核成功');
          requestShopInquire();
        })
        .catch((err: any) => {
          reject(err);
          ElMessage.error('审核失败');
        });
    });
  }, 500);
};
const unPassCause = ref('');
/**
 * 审核不通过确认
 */
const UnPassSure = () => {
  if (timer != null) {
    clearTimeout(timer);
  }
  timer = setTimeout(async () => {
    UnPassShow.value = false;
    mask.value = false;
    auditResult.value = 1;
    const a = {
      adminId: userId,
      shopId: shuoCheck.value.id,
      auditResult: auditResult.value,
      rejectReason: unPassCause.value,
      depositRequired: false,
    };
    console.log(a);
    new Promise((resolve, reject) => {
      RequestStoreShopAudit(a)
        .then((res: any) => {
          resolve(res);
          UnPassShow.value = false;
          mask.value = false;
          ElMessage.success('审核成功');
          requestShopInquire();
        })
        .catch((err: any) => {
          reject(err);
          ElMessage.error('审核失败');
        });
    });
  }, 500);
};
/**
 * 审核不通过取消
 */
const UnPassCancle = () => {
  UnPassShow.value = false;
  mask.value = false;
};
const tableData1 = ref<any>([]);
/**
 * 点查看审核
 */
const activate = (item: any) => {
  auditShow.value = true;
  mask.value = true;
  console.log(item);
  tableData1.value[0] = item;
};
/**
 * 查看审核确认，取消事件
 */
const auditSure = () => {
  auditShow.value = false;
  mask.value = false;
};
/**
 * 遮罩层数据，事件
 */
const maskBtn1 = () => {
  passShow.value = false;
  auditShow.value = false;
  mask.value = false;
  shopTableShow.value = false;
  messagesShow.value = false;
  platform.value = false;
  principal.value = false;
  UnPassShow.value = false;
  sendMes.value = {
    templateId: '',
    type: '',
    content: '',
    title: '',
  };
};

const tableRowClassName = ({row, rowIndex}: any) => {
  // const rowIndex = tableDataParent.value.findIndex(item => item.id === id)
  if (rowIndex % 2 !== 0) {
    return 'warning-row';
  } else {
    return '';
  }
};
/**
 * 分页
 */
const pageChange = async (val: number) => {
  requestShopInquire();
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.table {
  //height: calc(100% - v-bind(tablelistHeight)) !important;
}

::v-deep .el-table--fit {
  //height: calc(100% - 130px) !important;
}

.table :deep(.el-table__cell) {
  text-align: center;
}

.messages {
  width: 600px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -250px;
  z-index: 99;
  background: #fff;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.table {
  padding: 10px 30px;

  .table_function {
    margin-top: 20px;
  }
}

.el-form-item :deep(.el-input-group__prepend) {
  width: 10px;
  background-color: #116cf8;
  color: #fff;
}

.el-form-item :deep(.el-upload--picture-card) {
  height: 100px;
  width: 100px;
  opacity: 0;
}

.photoBox {
  width: 148px;
  height: 148px;
  border-radius: 5px;
  border: 1px dashed var(--el-border-color-darker);
  background: #fafafa;
  position: relative;

  .el-icon {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 50%;
    margin-left: -10px;
    font-size: 20px;
  }
}

.el-drawer {
  padding: 20px;

  .shop_head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .shop {
      display: flex;
      align-items: center;

      .shop_logo {
        width: 60px;
        height: 60px;
        border: 0;
        border-radius: 50%;
      }

      .name {
        margin-left: 10px;
        color: #424242;
        font-size: 16px;
        font-weight: bold;

        .shop_id {
          font-size: 12px;
          font-weight: normal;
          color: #bcbcbc;
          margin-top: 5px;
        }
      }
    }
  }

  .nav1 {
    display: flex;
    height: 30px;
    align-items: center;
    margin-top: 20px;
    border-bottom: 0;

    .nav_li {
      width: 50%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
    }

    .current {
      border-bottom: 2px solid #5697f9;
    }
  }

  .platform {
    padding: 20px;
  }

  .area {
    display: flex;
    margin-top: 30px;
    align-items: center;

    .img_b {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }

    .title {
      width: 150px;
      color: #bcbcbc;
      font-size: 12px;
    }

    .mes {
      font-size: 12px;
    }
  }

  .btn_center {
    width: 200px;
    margin: 40px auto;
  }
}

:deep(.el-drawer__header) {
  margin-bottom: 0px;
}

/**
 *  商家审核
 */
.audit {
  position: fixed;
  width: 50%;
  height: 40%;
  left: 25%;
  top: 30%;
  background: #fff;
  z-index: 99;

  .shop_title {
    height: 60px;
    border-bottom: 1px solid #ededed;
    line-height: 60px;
    font-size: 18px;
  }
}

/**
 * 审核通过
 */
.pass {
  width: 400px;
  height: 300px;
  position: fixed;
  left: 50%;
  margin-left: -200px;
  top: 50%;
  margin-top: -150px;
  background: #fff;
  z-index: 99;

  .cancel {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
  }

  .center {
    width: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .text1 {
      font-size: 20px;
      color: #116cf8;

      .el-icon {
        margin-right: 10px;
      }
    }

    .text2 {
      font-size: 14px;
      margin-top: 20px;
    }

    .btn_center {
      margin-top: 30px;

      .el-button {
        width: 70px;
      }
    }
  }
}

/**
 * 审核未通过
 */
.UnPass {
  position: fixed;
  width: 50%;
  height: 40%;
  left: 25%;
  top: 30%;
  background: #fff;
  z-index: 99;

  .cause {
    display: flex;
    margin-top: 50px;

    .cause_title {
      display: inline-block;
      width: 60px;
      font-size: 14px;
      color: #333;
    }
  }
}

/**
 * 商家审核表格
 */
.shop_table {
  width: 40%;
  height: 90%;
  left: 30%;
  top: 5%;
  position: fixed;
  z-index: 99;
  background: #fff;
  overflow: hidden;

  .title {
    height: 60px;
    line-height: 60px;
    border-bottom: 2px solid #efefef;
    margin-bottom: 10px;
  }

  .check {
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 2px solid #efefef;
    padding: 0 40px;
  }

  .content1 {
    height: 83%;
    padding: 0 40px;
    overflow: scroll;
  }

  .title1 {
    height: 7%;
  }
}

:deep(.el-descriptions__body) {
  .el-descriptions__table.is-bordered .el-descriptions__cell {
    padding: 30px 11px;
    min-width: 100px;
    max-width: 500px;
    word-break: break-all; // 让内容超出列宽时自动换行显示
    word-wrap: break-word;
  }
}

.mx-1 {
  display: flex;
  align-items: center;
}

:deep(.el-drawer.rtl) {
  background: #f5f9ff;
  width: 600px !important;
}
input{
  font-size: 14px;
  color: #535353;
}
</style>
